@import _tokens

.lightbox-container
  position: fixed
  top: 5%
  left: 50%
  transform: translateX(-50%)
  z-index: 6
  padding: 10px 20px
  max-width: 90%
  max-height: 90%
  margin: 0 auto
  background-color: $card-background
  display: flex
  flex-direction: column
  align-items: center
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)
  pointer-events: auto

  img
    max-width: 100%
    max-height: 100%
    object-fit: contain

  .image-wrapper
    display: flex
    flex: 1
    min-height: 100px

  .caption-wrapper
    flex: 1
    text-align: center
    margin-top: 10px

  button
    align-self: flex-end

.define-target
  color: $main-text-color
  border-bottom: 0.0625em dashed rgba($main-text-color, .5)
  cursor: pointer

  &:hover
    border-bottom-style: solid
    text-decoration: none

.definition-popover
  background-color: $card-background
  padding: 10px
  margin: 0
  display: block
  max-width: 400px
  width: 90%
  border: 1px solid rgba(0, 0, 0, 0.2)
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4)

  .arrow,
  .arrow::before
    position: absolute
    width: 12px
    height: 12px
    background: inherit

  .arrow
    visibility: hidden

    &::before
      visibility: visible
      content: ''
      transform: rotate(45deg)
      border-style: solid
      border-color: rgba(0, 0, 0, 0.2)
      border-width: 1px

  &[data-popper-placement^='top'] > .arrow
    bottom: -7px

    &::before
      border-left-width: 0
      border-top-width: 0

  &[data-popper-placement^='bottom'] > .arrow
    top: -7px

    &::before
      border-right-width: 0
      border-bottom-width: 0

  &[data-popper-placement^='left'] > .arrow
    right: -7px

    &::before
      border-left-width: 0
      border-bottom-width: 0

  &[data-popper-placement^='right'] > .arrow
    left: -7px

    &::before
      border-right-width: 0
      border-top-width: 0

@mixin popoversDarkMode()
  .definition-popover,
  .lightbox-container
    background-color: $dark-lightbox-background
    color: $dark-main-color

    button
      color: $dark-main-color

    a
      color: $dark-link-color

  .definition-popover
    border-color: $timestamp-color

    .arrow::before
      border-color: $timestamp-color

  .define-target
    color: $dark-main-color
    border-bottom: 0.0625em dashed rgba($dark-main-color, .75)
